<script setup lang='ts'>
import { ref } from 'vue';
import { useStaffsStore } from '@/store/useStaffsStore';
import zhCN from 'ant-design-vue/es/locale/zh_CN'
const StaffsStore = useStaffsStore()

const open = ref<boolean>(false);
const confirmLoading = ref<boolean>(false);
const Data = ref({
    name:'',
    department:'',
    position:'',
    phone:'',
    address:'',
    jobTime:''
})

const showModal = () => {
  open.value = true;
};

const handleOk = () => {
  StaffsStore.addStaff(Data.value)
  confirmLoading.value = true;
  setTimeout(() => {
    open.value = false;
    confirmLoading.value = false;
  }, 2000);
};
</script>
<template>
    <div class="h-14 flex items-center justify-end bg-white">
        <a-button type="primary" class="bg-teal-400 mr-2.5" @click="showModal" >添加员工</a-button>
        <a-modal v-model:open="open" title="新员工信息" :confirm-loading="confirmLoading" @ok="handleOk" 
         :okButtonProps="{class:'text-black border-zinc-200'}" :cancelButtonProps="{class:'border-zinc-200 text-black',type:'primary'}" >
            
         <!-- 表单信息 -->
            <form action="" class="ml-11">
                <div class="my-2.5">
                    <label for="name">姓名：</label>
                    <input type="text" v-model="Data.name" class="bg-neutral-200 focus:outline-none rounded-md ml-7">
                </div>
                <div class="my-2.5">
                    <label for="name">所属部门：</label>
                    <input type="text" v-model="Data.department" class="bg-neutral-200 focus:outline-none rounded-md">
                </div>
                <div class="my-2.5">
                    <label for="name">职位：</label>
                    <input type="text" v-model="Data.position" class="bg-neutral-200 focus:outline-none rounded-md ml-7">
                </div>
                <div class="my-2.5">
                    <label for="name">电话：</label>
                    <input type="text" v-model="Data.phone" class="bg-neutral-200 focus:outline-none rounded-md ml-7">
                </div>
                <div class="my-2.5">
                    <label for="name">地址：</label>
                    <input type="text" v-model="Data.address" class="bg-neutral-200 focus:outline-none rounded-md ml-7">
                </div>
                <div class="my-2.5">
                    <label for="name">入职时间：</label>
                    <a-config-provider :locale="zhCN">
                      <a-space direction="vertical" :size="12">
                        <a-date-picker v-model:value="Data.jobTime" value-format="YYYY-MM-DD" format="YYYY-MM-DD" />
                      </a-space>
                    </a-config-provider>
                </div>
            </form>

        </a-modal>
    </div>
</template>
<style scoped>
</style>